# カスタムPC Builder Web UI デモファイル

このファイル群は、Google Geminiとの対話のみで開発されたカスタムPCパーツ見積もりツールのデモコード一式です。

## 1. ファイル構成

以下のファイルとフォルダが含まれています。

| ファイル/フォルダ名 | 役割 |
| :--- | :--- |
| `index.html` | メインの見積もりUIページ（起動ファイル） |
| `usage.html` | ツールの使い方と免責事項が記載されたページ |
| `js/` | JavaScriptファイル（`app.js`など、メインのロジック） |
| `css/` | CSSファイル（`style.css`など、デザイン・レイアウト） |
| `data/` | パーツデータが格納されているフォルダ |

## 2. デモの起動方法

特別なサーバー環境は不要です。以下の手順で簡単に起動できます。

1.  **ZIPファイルを解凍**します。
2.  解凍後のフォルダ内にある**`index.html`**ファイルをダブルクリックしてください。
3.  お使いのWebブラウザ（Chrome, Edge, Safariなど）が自動的に起動し、PC BuilderのUIが表示されます。

## 3. ツールの主な利用方法

* **パーツ選択:** 画面右側のカテゴリからパーツを選択すると、左側の構成リストと合計金額がリアルタイムで更新されます。
* **データ管理:** 画面上部のナビゲーションにある「データ管理」から、パーツデータの追加・修正・エクスポートが行えます。
* **使い方:** 画面上部の「使い方」リンクをクリックすると、ツールの詳細情報と免責事項を確認できます。（※CodePenのデモとは異なり、ローカル実行時は別ページに遷移します。）
* **見積書発行:** 画面下部の「見積書をエクスポート」ボタンから、構成リストと購入リンクを含むCSVファイルが出力できます。

---

## 4. ⚠️ 重要な注意事項（免責事項）

このツールをご利用いただく前に、以下の点にご注意ください。

### 4-1. 価格の非リアルタイム性について

このWeb UIに表示される価格は、開発時にデータとして組み込まれた**静的な価格**です。

* 実際のECサイト（Amazonなど）での**販売価格や在庫状況は常に変動しています**。
* 見積書作成や購入の際は、必ずご自身で**ECサイトの最新価格をご確認ください**。
* 本ツールが提供する価格情報によって生じたいかなる損害についても、開発者（ブログ運営者）は一切責任を負いません。

### 4-2. 互換性チェックについて
* メモリ、電源容量、ケースサイズなどのより複雑な互換性については、**購入前に必ずご自身でメーカーの仕様をご確認ください。**

---

<p>このツールが、あなたのAIプログラミング学習やパーツ選びの参考になれば幸いです。</p>